Skip to content

fix(menu): do not stretch menu items to full menu height #5588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Oct 7, 2025
Merged

fix(menu): do not stretch menu items to full menu height #5588

merged 1 commit into from
Oct 7, 2025
+2 −9

Conversation

Brainshaker95
Copy link
Contributor

Fixes #5490

Description

Previously the menu items where evenly spaced inside one column based on a flex-basis of 22%. This PR removes this restriction so that the items only take as much height as needed.

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

@robert-hebel-sb
Copy link
Contributor

Hey @Brainshaker95, thanks for taking your time and providing a fix 🙏

although it resolves the issue with stretched items I see elements are still displayed outside the container. Would you like to fix it as well?

Screenshot 2025-10-06 at 17 32 09

@Brainshaker95
Copy link
Contributor Author

@robert-hebel-sb

I can do that but first we would need to discuss how exactly we should solve that.

The issue here is that the combination of display: flex, flex-direction: column and max-height: 500px and width: 700px will inevitably lead to this behavior. I'm afraid the possible solutions to this would be quite more involved looking at the CSS.
The flex-direction of column makes things pretty hard here and changing that would also change which item is placed where.

Your exact issue could simply fixed by increasing the width of the .dd-menu-items.
But doing this just postpones the issue to the next width threshhold someone reaches. It currently depends fully on the auto-widths of the flex elements contained. When there is no more space for the items to flow into the element will overflow.

Any input? Maybe merge this PR and create a followup issue?

@robert-hebel-sb
Copy link
Contributor

@Brainshaker95
Sure thing, let's merge it then 🚀

Any input? Maybe merge this PR and create a followup issue?

I see changing width: 700px to width: max-content; fixes the overflow issue. I will create a separate PR with the fix.

Once again, thanks for the help 🥇

@robert-hebel-sb robert-hebel-sb merged commit 343421b into swagger-api:master Oct 7, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@robert-hebel-sb robert-hebel-sb robert-hebel-sb approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Menu bug
2 participants
@Brainshaker95 @robert-hebel-sb